<template>
  <div
    v-if="hasdata==1"
    class="page-footer"
    :class="{productDetail:showData,hasbess:realInfo.cashtype==2}"
    ref="conBox"
  >
    <!-- v-scroll='scrollF' -->
    <!-- 头部 -->
    <v-header v-show="showTitle" :class="{nav:showTitle}">
      <div class="nav-tab2 ellipsis">{{showTitle?realInfo.name:''}}</div>
      <v-cart :isshow="true" :isdark="true"></v-cart>
    </v-header>
    <div class="product_content" v-if="showData" ref="conT">
      <!-- 返回按钮 -->
      <div v-if="!insq" v-show="!showTitle" class="flex-center top_btns fixnav">
        <v-back></v-back>
        <div class="nav-tab2"></div>
        <v-cart :isshow="true" :isdark="true"></v-cart>
      </div>
      <!-- 详情大图轮播 -->
      <div class="product_sw">
        <swiper :options="prodSwiOption" class="product_sw">
          <swiper-slide v-for="(item,index) in swItem" :key="index">
            <img v-lazy="https(item)" :alt="item">
          </swiper-slide>
          <div
            class="swiper-scrollbar"
            slot="scrollbar"
            :style="realInfo.producttype==7?'bottom:0px !important;':''"
          ></div>
        </swiper>
        <div class="prod_promotion" v-if="realInfo.producttype==7&&evts.evtactivity">
          <img width="100%" height="100%" v-lazy="https(realInfo.platformactivityicon)" alt>
        </div>
      </div>
      <!-- 价格描述部分 -->
      <div class="gaps">
        <div class="info-price font-price">
          <!--海外价=====================================================================================================================-->
          <template v-if="realInfo.isov&&!css.isShowHelp">
            <span>{{realInfo.symbol}}{{realInfo.overseasprice.toFixed(2)}}{{realInfo.unit}} =</span>
          </template>

          <template v-if="realInfo.salestatus === 1">
            <template v-if="!realInfo.isov||css.isShowHelp">
              <span
                v-if="!css.special"
                class="info-saleprice"
              >¥{{css.isShowGroup ? groupProductDetailInfo.teamprice.toFixed(2) : (css.isShowHelp ? CutProductDetailInfo.cutminprice.toFixed(2) :realInfo.saleprice.toFixed(2))}}</span>
              <span
                v-if="css.special || css.isShowGroup || css.isShowHelp"
                class="spec_price"
              >¥{{realInfo.saleprice.toFixed(2)}}</span>
            </template>
            <template v-else>
              <span :class="{'spec_price':css.special}">¥{{realInfo.realpriceChia.toFixed(2)}}</span>
            </template>

            <span
              class="info-saleprice"
              v-if="css.special&&realInfo.realprice"
            >¥{{realInfo.realprice.toFixed(2)}}</span>
          </template>
          <template v-else>
            <label v-if="realInfo.salestatus === 2 && realInfo.producttype === 7 ">
              <span :class="{'spec_price':css.special}">¥{{realInfo.saleprice.toFixed(2)}}</span>
              <span class="info-saleprice">???</span>
            </label>
            <label v-else>
              <span
                :class="{'spec_price':css.special, 'info-saleprice':!css.special}"
              >¥{{realInfo.saleprice.toFixed(2)}}</span>
              <span
                class="info-saleprice"
                v-if="realInfo.specialprice>0"
              >¥{{realInfo.specialprice.toFixed(2)}}</span>
            </label>
          </template>
        </div>

        <div class="group_info" v-if="css.isShowGroup && !css.special && isShare">
          <ul>
            <li class="people">
              <span>{{groupProductDetailInfo.teamlimitcount}}人团</span>
            </li>
            <li v-if="groupProductDetailInfo.teamtotalcount>=10">
              <span>已团{{groupProductDetailInfo.teamtotalcount}}件</span>
            </li>
            <li v-else>
              <span>NEW</span>
            </li>
          </ul>
        </div>

        <div class="distribution" v-if="!isShare">
          分享可得佣金
          <span>¥{{distribution.commission}}</span>
        </div>
        <div class="group_info" v-if="css.isShowHelp">
          <ul>
            <li class="people">
              <span>{{CutProductDetailInfo.cutsuccesscount}}人成功助力</span>
            </li>
          </ul>
        </div>

        <p class="flex-center info-exchange" v-if="realInfo.isoverseas||realInfo.exchange != 1">
          <span v-if="realInfo.exchange!=1">1{{realInfo.currencyname}}兑换{{realInfo.exchange}}元人民币</span>
          <!--<span v-if="realInfo.referenceprice>0">国内参考价{{realInfo.referenceprice.toFixed(2)}}元</span>-->
        </p>

        <div class="product_name">
          <section>{{realInfo.name}}</section>
          <section class="clearfix">
            <span class="send">
              <!--<span :style="'background-image:url('+realInfo.flag+')'"></span>发货地：{{realInfo.sendplace}}-->
              发货地：{{realInfo.sendplace}}
            </span>
            <span>
              运费 :
              <span v-if="realInfo.destination">至{{realInfo.destination}},</span>
              ¥{{realInfo.expressfee&&realInfo.expressfee.toFixed(2)}} 元
            </span>
            <!-- 海外直邮==================================================================================== -->
            <span>
              <span
                v-if="realInfo.isglobalpurchase&&realInfo.isdirectmail"
                class="isglobalpurchase"
              >海外直邮</span>
              
              <span
                class="isglobalpurchase"
                v-if="realInfo.isglobalpurchase&&!realInfo.isdirectmail"
              >国内现货</span>
            </span>
          </section>
        </div>
      </div>

      <!-- 买手集合店 潮汇 -->
      <!-- <div class="bg_ff busName ellipsis" @click.stop="gotoShopDetl(realInfo.businessid)">
        <label :class="{'buyers':realInfo.businesstype == 2}">{{realInfo.businesstype == 1? '品牌商城店':'买手集合店'}}</label>{{realInfo.businessname}}
        <span>&gt;</span>
      </div>-->
      <!--判断活动-->
      <div
        class
        :class="{Ev:evts.showEvtcoupon|| evts.evtpromotion|| evts.evtlimit|| evts.showEvtexpressfree|| evts.evtspecial || evts.evtactivity}"
      >
        <!-- 平台大促 -->
        <div class="hasEv" v-if="realInfo.producttype==7&&evts.evtactivity">
          <span class="icon_activity"></span>
          <p class="activity">
            <span>
              此商品参与
              <i>{{evts.evtactivity.name}}</i>,
            </span>
            <span
              v-if="isBegin==1"
            >开始时间{{activityTime.begintimeMouth}}月{{activityTime.begintimeDate}}日{{activityTime.begintimeHours| decpadleft}}:{{activityTime.begintimeMinutes| decpadleft}}</span>
            <span
              v-if="isBegin==0"
            >结束时间{{activityTime.endtimeMouth}}月{{activityTime.endtimeDate}}日{{activityTime.endtimeHours|decpadleft}}:{{activityTime.endtimeMinutes|decpadleft}}</span>
            <span @click="goPlatFormActivity(evts.evtactivity.id)" class="moregoods">更多商品&gt;</span>
          </p>
        </div>
        <!--包邮-->
        <div class="hasEv" v-if="evts.showEvtexpressfree">
          <span class="icon_free"></span>
          <p>
            <span
              style="color:#ffd645"
              v-if="productInfo.evtexpressfree&&productInfo.evtexpressfree.usecondition>0"
            >满{{productInfo.evtexpressfree.usecondition}}包邮，</span>此商品包邮。
          </p>
        </div>
        <!--鬼市活动-->
        <div class="hasEv" v-if="evts.evtspecial">
          <span class="icon_special"></span>
          <p>
            此商品参与鬼市活动,
            <span style="color:#ffd645" @click.stop.prevent="goHost">点击前往 &gt;</span>
          </p>
        </div>
        <!--限量-->
        <div class="hasEv" v-if="evts.evtlimit">
          <span class="icon_limit"></span>
          <p>
            此店铺参与限量发售,
            <span
              class="time_color"
              v-if="isBegin==0"
            >距结束:{{countDown.d?countDown.d+'天':' '}}{{countDown.H}}小时{{countDown.m}}分钟</span>
            <span
              class="time_color"
              v-if="isBegin==1"
            >距开始:{{countDown.d?countDown.d+'天':' '}}{{countDown.H}}小时{{countDown.m}}分钟</span>
          </p>
        </div>
        <!--促销-->
        <div class="hasEv" v-if="evts.evtpromotion">
          <span class="icon_sale"></span>
          <p>
            此店铺参与了促销,
            <span
              class="time_color"
              v-if="isBegin==0"
            >距结束:{{countDown.d?countDown.d+'天':' '}}{{countDown.H}}小时{{countDown.m}}分钟</span>
            <span
              class="time_color"
              v-if="isBegin==1"
            >距开始:{{countDown.d?countDown.d+'天':' '}}{{countDown.H}}小时{{countDown.m}}分钟</span>
          </p>
        </div>
        <!--有礼券-->
        <div class="hasEv" v-if="evts.showEvtcoupon">
          <span class="icon_gift"></span>
          <p>
            此店铺有礼券可领, 获得更多优惠,
            <span style="color:#ffd645" @click.stop="showCoupon">点击领取 &gt;</span>
          </p>
        </div>
      </div>
      <!-- 全球购商品========================================================================================== -->
      <div class="globalShop gaps" @click.stop="globalShop()">
        <!-- <span>假一赔三</span> -->
        <span v-if="realInfo.isaftersale">无忧售后</span>
        <span v-if="!realInfo.isaftersale">不支持退换</span>
        <span v-if="realInfo.isglobalpurchase">全球购商品</span>
        <span class="enter">></span>
      </div>
      <div class="promise contentText" @click.stop="globalShop()" v-show="salesShow">
        <transition name="fadeTuihuo">
          <salesBounced
            :realInfoData="realInfo"
            v-show="salesShow"
            :globalShopFu="globalShop"
            :goSeleSizeNull="goSeleSizeNullFun"
          ></salesBounced>
        </transition>
      </div>

      <!-- 拼团 -->
      <div class="gaps" v-if="css.isShowGroup && !css.special">
        <div class="group_list">
          <div class="info info_border">开团后邀请好友参团，人数不足自动退款</div>
          <div class="info" v-if="css.isShowGroupHaveList">
            <span>{{groupProductDetailInfo.teamcount}}位潮人正在开团，可直接参与</span>
            <span class="group_more" @click="showGroupMoreList()">查看全部 ></span>
          </div>

          <div
            class="group_item"
            v-for="(groupItem ,index) in groupList"
            :key="groupItem.teamid"
            v-if="css.isShowGroupHaveList && groupItem.isOpen"
          >
            <div class="item_avatar">
              <img v-lazy="https(groupItem.headimgurl)" alt>
            </div>
            <div class="item_username ellipsis">{{groupItem.nickname}}</div>
            <div class="middle">
              <div class="item_left">还剩{{groupItem.remainingcount}}人成团</div>
              <div class="item_time">
                剩余:
                <span class="item_time_left">{{groupItem.groupTimeRemain}}</span>
              </div>
            </div>
            <div>
              <button class="join-button" @click="cartModel(2, 2, groupItem.teamid)">去参团</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 拼团 查看全部 -->
      <mt-popup v-model="css.groupPopUp" position="top">
        <group-popup
          :product-list="groupProductDetailInfo.list"
          @close="showGroupMoreList()"
          @join="showGroupMoreList($event)"
        ></group-popup>
      </mt-popup>

      <!-- 购买须知 -->
      <div class="contentText" @click.stop="goSeleSize(0)" v-show="purchaseNotesHash">
        <transition name="fadeTuihuo">
          <nowBuyBounced
            :goSeleSizeBuy="goSeleSize"
            :goSeleSizeNull="goSeleSizeNullFun"
            v-show="purchaseNotesHash"
          ></nowBuyBounced>
        </transition>
      </div>
      <!-- 背景介绍 -->
      <div class="product_logo gaps" v-if="realInfo.brandlogo">
        <div class="logo_img">
          <img
            v-lazy="https(realInfo.brandlogo)"
            alt
            @click.stop="goSearch(realInfo.brandname,realInfo.brandid)"
          >
        </div>
        <p>{{realInfo.brandname}}</p>
        <p v-if="realInfo.brandmemo">{{realInfo.brandmemo}}</p>
      </div>

      <!-- 商品规格 -->
      <div class="product_texture gaps">
        <section>
          <p>
            商品编号:
            <span>{{realInfo.prokey}}</span>
          </p>
          <p>
            材质:
            <span>{{realInfo.texture}}</span>
          </p>
          <p>
            颜色:
            <span>{{realInfo.colorattribute}}</span>
          </p>
        </section>
        <section class="sizeList">
          <table>
            <tr class="sizeHead">
              <td>规格</td>
              <td v-for="(item,index) in sizeList.head" :key="index">{{item}}</td>
            </tr>
            <tr v-for="(item,index) in sizeList.body" :key="index">
              <td>{{item.key}}</td>
              <td v-for="(s,index) in item.val " :key="index">{{s}}</td>
            </tr>
          </table>
        </section>
        <ul class="labels">
          <li
            v-for="(item,index) in labels"
            :key="index"
            @click="goSearch(item.name)"
            v-if="item.name"
          >{{item.name}}</li>
        </ul>
      </div>
      <!-- 进店逛逛 -->
      <div class="BusinessIsGlobalPurchase gaps">
        <div class="shopTLD">
          <img v-lazy="https(realInfo.businessheadportraiturl)" alt>
        </div>
        <div class="businesstype">
          {{realInfo.businessname}}
          <div>
            <!-- <span class="globalLogo" v-if="realInfo.businessisglobalpurchase"></span>
               <span class="storeLogo"  v-if="realInfo.businesstype==1"></span>
               <span class="buyLogo"    v-if="realInfo.businesstype==2"> </span>
            <span class="patentLogo" v-if="realInfo.businesstype==3"></span>-->
            <i class="ico-sp-glb tilt" v-if="realInfo.businessisglobalpurchase"></i>
            <i class="ico-sp-official tilt" v-if="realInfo.businesstype==1"></i>
            <i class="ico-sp-buy tilt" v-if="realInfo.businesstype==2"></i>
            <i class="ico-sp-store tilt" v-if="realInfo.businesstype==3"></i>
          </div>
        </div>
        <div class="go-stroll" @click.stop="gotoShopDetl(realInfo.businessid)">进店逛逛</div>
      </div>
      <!-- 热门推荐的产品 -->
      <div class="recomd gaps" v-if="relate&&relate.length>0">
        <p class="recomd_title">热门推荐</p>
        <Recomd-prods :recodsList="relate"></Recomd-prods>
      </div>
    </div>
    <div class="back-newshome" v-if="!insq">
      <img :src="img" alt @click="backtoMall()">
    </div>
    <!-- 商品详情和购买须知 -->
    <v-delay :delay="500">
      <template v-if="showData">
        <div class="titleP clearfix fixedTop" :style="insq?'top:0;':''">
          <!-- :style="fixStyleExt" :class="{fixedTop:titleFix}" -->
          <p @click="activeType=0">
            <span :class="{activeType:activeType==0}">商品详情</span>
          </p>
          <p @click="activeType=1">
            <span :class="{activeType:activeType==1}">购物须知</span>
          </p>
        </div>
        <div class="product_des" v-show="activeType==0" v-html="https(realInfo.description)"></div>
        <ShopNotice v-if="activeType==1"></ShopNotice>
        <div class="bee_box" v-if="realInfo.producttype ==5&&!insq" @click.stop.prevent="loadApp">
          <p class="left_bee font-price flex-center">
            <template v-if="!realInfo.isallexchange">¥{{realInfo.specialprice}}+</template>
            <em></em>
            &nbsp;{{realInfo.bees}}
          </p>
          <p class="right_bee">立即兑换</p>
        </div>
        <div class="clearFix">
          <div class="fixBottom clearFix" v-if="realInfo.cashtype==2">
            <span class="font-price">
              ¥{{realInfo.cashprice.toFixed(2)}} +
              <i class="icon_bee"></i>
              {{realInfo.cashbees}}
            </span>
            <span class="exchange">立即兑换</span>
          </div>
          <div class="footer_bot footer_bar fix-btm">
            <section class="icon_btn" :class="{noFavBtn:realInfo.producttype == 1,insq:insq}">
              <template v-if="insq">
                <div class="server flex-center" @click.stop="QiyuProd(realInfo)">
                  <img src="//files.eyee.com/mcdn/static/img/service_white.png" alt>
                  <span>客服</span>
                </div>
                <v-cart></v-cart>
                <div class="favor" v-if="realInfo.producttype!=1">
                  <span
                    @click.stop="favProduct"
                    :class="{out_fev:realInfo.pstatus==3,icon_fev:!realInfo.isfavor,icon_isfev:realInfo.isfavor,bs_animate:favShow}"
                  ></span>
                </div>
              </template>
              <template v-else>
                <span class="icon_shop" @click.stop="gotoShopDetl(realInfo.businessid)"></span>
                <span
                  class="icon_server"
                  @click.stop="QiyuProd(realInfo)"
                  :class="{out_fev:realInfo.pstatus==1||realInfo.pstatus==2||evts.evtlimit||realInfo.type==1}"
                ></span>
                <span
                  v-if="realInfo.producttype!=1"
                  @click.stop="favProduct"
                  :class="{out_fev:realInfo.pstatus==3,icon_fev:!realInfo.isfavor,icon_isfev:realInfo.isfavor,bs_animate:favShow}"
                ></span>
              </template>
            </section>
            <section
              class="btn_fix halfBtn"
              :class="{noFavBtn:realInfo.producttype == 1, insq:insq}"
            >
              <div
                v-if="(realInfo.producttype ==1)||(realInfo.producttype ==0&& realInfo.salestatus ==2)||realInfo.noactivity||realInfo.soldout || css.isShowGroup || css.isShowHelp  && !css.special"
              ></div>
              <div class="btn_fix btn_m" v-else @click="cartModel(0)">加入购物车</div>

              <template
                v-if="realInfo.soldout || (realInfo.salestatus ==2 && realInfo.producttype !=7)"
              >
                <div
                  class="btn_fix noStartSoldout"
                  :class="{noCartBtn:(realInfo.producttype ==1)||(realInfo.producttype ==0&& realInfo.salestatus ==2)||realInfo.noactivity||realInfo.soldout}"
                >{{realInfo.salestatus==2?(timeSale||'未开始'):'已售罄'}}</div>
              </template>
              <!-- isShowHelp 助力-->
              <template v-else-if="css.isShowHelp && !css.special">
                <div class="btn_fix btn_buy" @click.stop="cutPay()">
                  <span class="group_buy_btn_price">
                    ¥{{(CutProductDetailInfo.cutcurrentprice - CutProductDetailInfo.cutcountmoney).toFixed(2)}}
                    <br>立即购买
                  </span>
                </div>
                <div class="btn_fix btn_group_buy" @click.stop="share()">
                  <span class="group_buy_btn_price">
                    ¥{{CutProductDetailInfo.cutminprice.toFixed(2)}}
                    <br>邀请助力
                  </span>
                </div>
              </template>
              <!-- <model v-if="cutGoingFail" :showBtn='showBtn' :cutText='cutText' :modelBgClassBG='modelBgClassBG' @close='close'></model> -->
              <template v-else-if="css.isShowGroup && !css.special">
                <div class="btn_fix btn_buy" @click="cartModel(1)">
                  <span class="group_buy_btn_price">
                    ¥{{realInfo.saleprice.toFixed(2)}}
                    <br>单独购买
                  </span>
                </div>
                <div class="btn_fix btn_group_buy" @click="cartModel(2, 1)">
                  <span class="group_buy_btn_price">
                    ¥{{groupProductDetailInfo.teamprice.toFixed(2)}}
                    <br>我要开团
                  </span>
                </div>
              </template>
              <template v-else>
                <div
                  class="btn_fix btn_buy"
                  :class="{noCartBtn:(realInfo.producttype ==1)||(realInfo.producttype ==0&& realInfo.salestatus ==2)||realInfo.noactivity||realInfo.soldout}"
                  @click="cartModel(1)"
                >立即购买</div>
              </template>
              <!-- 弹框 -->
              <transition name="cutModel">
                <model
                  v-show="cutGoingFail"
                  :showBtn="showBtn"
                  :cutText="cutText"
                  :modelBgClassBG="modelBgClassBG"
                  @close="close"
                ></model>
              </transition>
              <!-- 确认收货地址 -->
              <div class="bg" v-if="confirmAdress" @click.stop="close"></div>
              <div class="confirmAdress" v-if="confirmAdress">
                <p class="title">请确认收货地址</p>
                <div class="addressName">
                  <span>{{userDefaultAddress.receiver}},</span>
                  <span>{{userDefaultAddress.mobile}}</span>
                </div>
                <p class="dizhi">{{userDefaultAddress.address}}</p>
                <div class="cut_btn">
                  <span @click.stop="close">取消</span>
                  <span @click.stop="cutBegain()">确认</span>
                </div>
              </div>
            </section>
          </div>
        </div>
      </template>
    </v-delay>

    <div class="loadError" v-if="error"></div>
    <!-- 点击礼券 点击领取弹框 -->
    <div v-if="evts.showEvtcoupon">
      <transition
        name="fade"
        enter-active-class="animated zoomIn"
        leave-active-class="animated zoomOut"
      >
        <CouponModal :cous="evts.evtcoupon" v-show="showCoupons"></CouponModal>
      </transition>
    </div>

    <!-- 点击加入购物车 弹出购物车组件 -->
    <!-- <div v-if="showcart">
      <CartModal :info="realInfo" :logoImg="swItem"></CartModal>
    </div>-->
    <!-- <product-items :show="css.showItems" :product-info="realInfo" :is-group-buy="false" @close='itemsClose'></product-items> -->
    <product-items
      v-if="css.showItems"
      :show="css.showItems"
      :helpType="true"
      :product-info="realInfo"
      :is-group-buy="groupBuyType>0"
      @close="itemsClose"
    ></product-items>
  </div>
  <div v-else>
    <div class="no-data">
      <img src="//files.eyee.com/mcdn/static/img/no_product.png" alt>
      <p>商品不存在或已下架</p>
    </div>
  </div>
</template>
<script>
import {
  NewDetail,
  DetailExpress,
  DetailFavor,
  ProdRelated
} from "../../common/api/product";
import { QiyuProd } from "../../common/api/WyQiyu";
import { FavorProduct } from "../../common/api/userFavor";
import { Add as CartAdd } from "../../common/api/cart";
import { GetCouponInProduct } from "../../common/api/marketing";
import { GetProductDetailGroup } from "../../common/api/group";
import { uploadUserAction } from "../../common/api/product";
import {
  CutProductDetail,
  CutProductDetailOpen,
  StartCut
} from "../../common/api/bargain";
import ArticleLabel from "../templates/ArticleLabel";
import ProductUnit from "../templates/ProductUnit";
import ShopNotice from "../templates/ShopNotice";
import RecomdProds from "../templates/RecomdProds";
import { mapGetters } from "vuex";
import CouponModal from "../templates/CouponModal";
import GroupPopup from "../group/GroupPopUp";
// import CartModal from '../templates/CartModal'
import ProductItems from "../../common/templates/mall/ProductItems";
import { _getDate, DateDiff, APP, getUrlParam } from "../../common/util"; // DateFormat, ENUM,
import model from "../helpbargain/helppopmodel.vue";
// const dom = window.document
const ls = window.localStorage;
const cartkey = "FC_LOCAL_CART";
export default {
  data() {
    return {
      css: {
        groupPopUp: false,
        isShowGroup: false,
        isShowGroupHaveList: false,
        special: false,
        showItems: false,
        isShowHelp: false,
        cutType: 1 // 1 分享 3 发起助力 （没有助力的情况 进来的时候）
      },
      producttype: 0,
      buyingType: 0,
      groupBuyType: 0, // 1 拼团 开团 2 拼团参团
      groupBuyTeamId: 0,
      activited: false,
      // fixStyleExt: {},
      // scrollWatch: true,
      // titleFix: false,
      activityTime: {},
      productInfo: {},
      evtcoupon: {},
      salesShow: false,
      prodSwiOption: {
        // autoplay: 2200,
        autoplayDisableOnInteraction: false,
        pagination: ".swiper-pagination",
        roundLengths: true,
        preloadImages: true,
        updateOnImagesReady: true,
        scrollbar: ".swiper-scrollbar",
        scrollbarHide: false // ,
        // scrollbarDraggable: true,
        // scrollbarSnapOnRelease: true
      },
      swItem: [],
      showPage: true,
      // screenWidth: '',
      labels: [],
      sizeList: {},
      showData: false,
      img: "//files.eyee.com/mcdn/static/img/home_b2c.png", // require('../../assets/img/home_b2c.png'),
      countDown: {},
      showTitle: false,
      activeType: 0,
      error: false,
      isBegin: 0, // 0是正常,1是还没有开始,

      popupVisible: false,
      hasdata: 1,
      relativePods: [],
      favShow: false,
      showcart: false,
      purchaseNotesHash: false, // 购买须知
      timeSale: "",
      groupProductDetailInfo: {
        pintuanId: "",
        teamprice: 999999,
        teamlimitcount: 99,
        teamtotalcount: 99,
        list: []
      },
      CutProductDetailInfo: {}, //助力砍价信息
      groupList: [],
      distribution: null,
      isShare: true,
      confirmAdress: false,
      showBtn: 1,
      cutText: "",
      modelBgClassBG: "", // cutgoing进行中  cutOver活动结束 cutLater来晚了 cutFail助理失败 cutorderPass订单超过有效时间 cutSuccess好人缘报账 cutNewpeople新人
      cutGoingFail: false
    };
  },
  components: {
    model,
    ArticleLabel,
    ProductUnit,
    ShopNotice,
    RecomdProds,
    CouponModal,
    ProductItems,
    GroupPopup,
    salesBounced: {
      //<div class="content"><p>正品保证</P><span>EYEE平台保证正品,假一赔三</span></div>
      // 基础保障
      template: `<div class="wrap" @click.stop="goSeleSizeNull">
                    <div class="title">基础保障</div>
                    <div>
                        <div class="content " :class="{'NoReturn':!realInfoData.isaftersale}">
                          <p >{{realInfoData.isaftersale?'无忧售后':'不支持退换货'}}</P>
                          <span v-if="realInfoData.isaftersale">消费者在满足7天无忧售后条件的前提下,可以提出"7天无忧售后"的申请</span>
                          <span v-else>该商品除质量问题外不予以退换,若您点击确认则默认您同意此条款</span>
                        </div>
                        <div class="content" v-show="realInfoData.isglobalpurchase">
                          <p>全球购商品</P>
                          <span>该商品来源于海外,如遇税费问题请联系在线客服</span>
                        </div>
                    </div>
                    <div class="btnc">
                      <span class="cancel" v-if="isShow">取消</span><span class="affirm"  @click.stop="globalShopFu()">确认</span>
                    </div>
                  </div>`,
      props: {
        realInfoData: Object,
        isShow: { type: Boolean, default: false },
        globalShopFu: Function,
        goSeleSizeNull: Function
      }
    },
    nowBuyBounced: {
      // 购买须知
      template: `
        <div class="wrap" @click.stop="goSeleSizeNull">
          <div class="title">购买须知</div>
          <p class="noReturnPru">不支持退换货</p>
          <span class="noReturnPruInfo">该商品除质量问题外不予以退货,若您点击确认则默认您同意此条款</span>
          <div class="btnc">
            <span class="cancel" @click.stop="goSeleSizeBuy(0)">取消</span><span class="affirm" @click.stop="goSeleSizeBuy(1)">确认</span>
          </div>
        </div>
        `,
      props: {
        goSeleSizeBuy: Function,
        goSeleSizeNull: Function
      }
    }
  }, // CartModal,
  computed: {
    ...mapGetters({
      user: "userInfo",
      insq: "insq",
      userInfo: "userInfo",
      userDefaultAddress: "userDefaultAddress",
      discounts: "discounts" // 优惠 和红包id 和 用户优惠券标识
    }),
    showCoupons() {
      return this.$store.state.product.showCoupons;
    },
    prodId() {
      return this.$route.params.id;
    },
    // 首页猜你喜欢 埋点字段requestid
    requestid() {
      return this.$route.query.requestid;
    },
    issearchclick() {
      return this.$route.query.issearchclick;
    },
    // dealLocal() {
    //   return this.insq && !this.user.token
    // },
    evts() {
      let _ = this;
      // console.log('computed evts ---', _.productInfo)
      let res = _.productInfo || {};
      let coupon = _.evtcoupon || [];
      let ret = {
        evtactivity: res.evtactivity,
        evtexpressfree: res.evtexpressfree,
        evtlimit: res.evtlimit,
        evtpromotion: res.evtpromotion,
        evtspecial: res.evtspecial,
        evtcoupon: coupon
      };

      if (ret.evtcoupon && ret.evtcoupon.length > 0) {
        // && !_.insq
        // 有礼券活动
        // ret.showEvtcoupon = true
        ret.showEvtcoupon = true;
      }
      // if (res.evtexpressfree) {
      //   // 包邮活动
      //   _.realInfo.showEvtexpressfree = true
      // }
      // console.log(ret,'ret=============================')
      return ret;
    },
    ordertype() {
      let opt = 0;
      let _ = this;
      if (_.css.isShowGroup) {
        opt = _.groupBuyType;
      } else if (_.css.isShowHelp) {
        opt = 3;
        if (!_.CutProductDetailInfo.cutid) {
          opt = 0;
        }
      }
      return opt;
    },
    realInfo() {
      let _ = this;
      // console.log('computed realInfo ---', _.productInfo)
      let res = _.productInfo;
      let info = (res && res.info) || {};
      let returnResult = {};
      if (res && res.info) {
        // "noactivity":"不参与的活动，空或null时 无，有0不使用优惠券，有1不包邮，竖线隔开"
        if (!_.sizeList.body) {
          try {
            _.sizeList = JSON.parse(info.sizedesc || "{}");
          } catch (e) {
            console.error("尺码表解析异常", e);
          }
          // console.log('尺码表--', _.sizeList)
        }

        _.swItem = (info.mainpic || "").split("|");
        var sharedes = APP.shareData.productDetail.desc;

        _.initShare({
          type: 1,
          info: { title: info.name, img: _.swItem[0], desc: sharedes }
        });
        if (
          info.specialprice &&
          info.specialprice > 0 &&
          info.specialprice < info.saleprice &&
          info.producttype !== 5 &&
          info.producttype !== 10 &&
          info.producttype >= 0
        ) {
          info.realprice = info.specialprice;
          _.css.special = true;
        } else if (_.css.isShowGroup) {
          _.css.special = false;
          info.groupPrice = _.groupProductDetailInfo.teamprice;
        } else if (_.css.isShowHelp) {
          _.css.special = false;
          info.cutSurplusPrice = _.CutProductDetailInfo.cutminprice;
        } else {
          _.css.special = false;
          info.realprice = info.saleprice;
        }
        if (this.css.isShowHelp) {
          info.specialprice = 0;
          info.saleprice = this.CutProductDetailInfo.cutcurrentprice;
        }
        // info.realprice = info.realprice.toFixed(2)
        // info.istax = true
        if (Number(info.exchange) !== 1) {
          // 国外商品
          info.isov = true;
          // info.isov = true // 加税
          // 国外产品 折合成人民币
          info.realpriceChia =
            Math.floor(info.overseasprice * info.exchange * 100) / 100; // .toFixed(2)
        } else {
          info.isov = false;
          // info.istax = false
          // 伪国内商品(exchange == 1 && isoversea == false)不加税	}
        }

        info.productid = info.id;
        // info.isglobalpurchase = info.isglobalpurchase
        // info.isdirectmail = info.isdirectmail
        // info.isaftersale = info.isaftersale
        // info.businessisglobalpurchase = info.businessisglobalpurchase
        // info.businesstype = info.businesstype
        if (
          info.salestatus === 2 &&
          info.producttype === 0 &&
          info.saletime &&
          !_.timeSale
        ) {
          _.countDownSale(info.saletime);
        }

        returnResult = info;

        _.labels = [
          { name: info.brandname, id: info.brandid },
          { name: info.categoryname, id: info.categoryid }
        ];
        // if (res.labels != null) {
        //   _.labels = _.labels.concat(res.labels)
        // }
        if (_.swItem && _.swItem.length <= 1) {
          _.showPage = false;
        }
        _.showData = true;
        var dateTime = null;
        var timeList = null;
        if (res.evtlimit) {
          // 限量的时间
          timeList = res.evtlimit;
        } else if (res.evtspecial) {
          // 鬼市特卖时间
          timeList = res.evtspecial;
        } else if (res.evtpromotion) {
          // 促销时间
          timeList = res.evtpromotion;
        } else if (res.evtactivity) {
          // 大促
          timeList = res.evtactivity;
          let bt = _getDate(timeList.begintime);
          let et = _getDate(timeList.endtime);
          _.activityTime = {
            begintimeMouth: bt.getMonth() + 1,
            begintimeHours: bt.getHours(),
            begintimeDate: bt.getDate(),
            begintimeMinutes: bt.getMinutes(),
            endtimeMouth: et.getMonth() + 1,
            endtimeHours: et.getHours(),
            endtimeDate: et.getDate(),
            endtimeMinutes: et.getMinutes()
          };
        }
        if (timeList && timeList.begintime) {
          var now = new Date();
          var begintime = new Date(_getDate(timeList.begintime));
          var t = now - begintime;
          if (t < 0) {
            this.isBegin = 1;
            dateTime = timeList.begintime;
          } else {
            this.isBegin = 0;
            dateTime = timeList.endtime;
          }
        }
        this.countDown = DateDiff({ destination: dateTime, type: "d" });
      }
      console.log("商品详情信息处理后: ", returnResult);
      return returnResult;
    },
    relate() {
      return this.relativePods;
    }
  },
  mounted() {
    let distribution = {
      id: getUrlParam("parentId"),
      commission: getUrlParam("commission")
    };
    this.distribution = distribution;
    if (getUrlParam("commission")) {
      this.isShare = false;
    }
    // this.screenWidth = window.screen.width
    this.getGroupProductDetail();
    this.getProductDetail();
    // console.log('_.$route.params.id',this.$route.params.id)
    this.getCutProductDetail(); //砍价接口
    if (this.$store.state.user.cutType) {
      this.confirmAdress = true; //弹框  确认收货地址
    }
    // alert(JSON.stringify(this.user))
    // let _ = this
    // setTimeout(()=>{
    //     alert(JSON.stringify(_.user))
    // },2000)
    // var titleFixed = 0
    // 定时器，5S之后开始请求接口
    // this.timeRun = setTimeout(() => {
    //   this.getRelateds()
    //   titleFixed = dom.querySelector('.titleP').offsetTop
    // }, 2000)

    // console.log('mounted', '')
    window.addEventListener("scroll", this.scrollF);
    // window.addEventListener('scroll', () => {
    //   if (this.scrollWatch) {
    // if (titleFixed < 1) titleFixed = dom.querySelector('.titleP') && dom.querySelector('.titleP').offsetTop
    // var scrollTop = 0
    // if (dom.documentElement && dom.documentElement.scrollTop) {
    //   scrollTop = dom.documentElement.scrollTop
    // } else if (dom.body) {
    //   scrollTop = dom.body.scrollTop
    // }
    // if (scrollTop >= titleFixed) {
    //   this.titleFix = true
    //   if (this.insq) {
    //     this.fixStyleExt = { top: 0 }
    //   }
    // } else {
    //   this.titleFix = false
    // }
    // console.log(titleFixed)
    //   }
    // })

    this.$nextTick(() => {
      window.document.querySelector("body").classList.remove("waiting-product");
    });

    let co = this.discounts;
    co.isusecoup = true;
    co.redpacketids = [];
    // 优惠券id
    co.couponuserid = "";
    this.$store.dispatch("Discounts", co);
  },
  // beforeDestroy() {
  //   clearTimeout(this.timeRun)
  // },
  beforeDestroy() {
    // this.scrollWatch = false
    // console.log('destroyed', '')
    window.removeEventListener("scroll", this.scrollF);
  },
  methods: {
    close(type) {
      if (type == 2) {
        this.$store.state.user.cutToastShare = true; // 进助力详情弹出分享
        this.$router.push(
          "/helpbargain/helpdetail/" + this.CutProductDetailInfo.cutid
        );
      } else if (type == 6) {
        this.$store.state.user.cutToastShare = false; // 进助力详情弹出分享
        this.$router.push(
          "/helpbargain/helpdetail/" + this.CutProductDetailInfo.cutid
        );
        // let url = "/pay/" + this.CutProductDetailInfo.orderno;
        // if (this.insq) url = `/frame/${encodeURIComponent(url)}`;
        // this.$router.push(url);
      } else if (type == 3) {
        this.$router.push("/helpbargain");
      }

      this.cutGoingFail = false;
      this.confirmAdress = false;
    },
    countDownSale(saletime) {
      let _ = this;
      let diff = DateDiff({ destination: saletime, type: "H" });
      // console.log('countDownSale', diff)
      if (diff.H <= 0 && diff.m <= 0 && diff.s <= 0) {
        _.getProductDetail();
        return;
      }
      _.timeSale = `距开售时间：${diff.H > 0 ? diff.H + "时" : ""}${
        diff.m > 0 ? diff.m + "分" : ""
      }${diff.s}秒`;
      setTimeout(() => {
        _.countDownSale(saletime);
      }, 1000);
    },
    getCutProductDetail() {
      // 助力商品详情
      let proid = this.$route.params.id;

      let CutProductDetailApi = this.userInfo.token
        ? CutProductDetail
        : CutProductDetailOpen;
      // if(this.userInfo.token){
      //   CutProductDetailApi = CutProductDetail
      // }else {
      //   CutProductDetailApi = CutProductDetailOpen
      // }

      CutProductDetailApi({ productid: proid }).then(res => {
        if (res && res.producttype === 10) {
          this.css.isShowHelp = true;
          document.title = "助力享低价";
          this.CutProductDetailInfo = res;
          this.producttype = res.producttype;
        }
        console.log(res, "助力商品详情");
      });
    },
    cutBegain() {
      //发起助力
      //  alert(this.cutid)
      //发起助力参数
      this.itemsCloseItem = JSON.parse(localStorage.getItem("helphand"));
      //  alert(this.itemsCloseItem.businessid)
      if (
        this.itemsCloseItem &&
        this.userDefaultAddress &&
        this.$store.state.user.cutType
      ) {
        // console.log(this.$store.state.user.cutType, "kkk");
        let option = {};
        option = {
          // ...this.itemsCloseItem,
          useraddressid: this.userDefaultAddress.addressid,
          businesscutid: this.CutProductDetailInfo.businesscutid,
          productitemid: this.itemsCloseItem.productitemid,
          productname: this.itemsCloseItem.productname
        };
        StartCut(option)
          .then(res => {
            if (res.flag) {
              localStorage.removeItem("helphand");
              this.$store.state.user.cutType = false;
              this.$store.state.user.cutToastShare = true; // 进助力详情弹出分享
              this.confirmAdress = false;
              this.$router.push("/helpbargain/helpdetail/" + res.cutuserid);
              // this.goBarGainDetail()
            } else {
              this.cutText = "助力失败,<br>去看看其他商品吧~";
              this.modelBgClassBG = "cutFail";
              this.showBtn = 1;
              this.cutGoingFail = true;
              this.$store.state.user.cutType = false;
              this.confirmAdress = false;
            }
          })
          .catch(err => {
            console.error(err, "err");
            this.cutText = "助力失败,<br>去看看其他商品吧~";
            this.modelBgClassBG = "cutFail";
            this.showBtn = 1;
            this.cutGoingFail = true;
            this.$store.state.user.cutType = false;
            this.confirmAdress = false;
          });
      }
    },
    cutPay() {
      if (!this.realInfo.isaftersale) {
        this.purchaseNotesHash = true;
      } else {
        this.cutPayBuy();
      }
      // this.cutPayBuy();
      // 助力单独购买
      // 判断是否登录
    },
    cutPayBuy() {
      // 按照原价购买
      // alert(JSON.stringify(this.user))
      if (!this.user.token && !this.insq) {
        this.$router.push("/login");
      }
      let cutitem = this.CutProductDetailInfo;

      // 收货地址
      let address = {
        address: cutitem.address,
        addressid: cutitem.useraddressid,
        country: cutitem.country,
        idcard: "",
        isdefault: true,
        mobile: cutitem.mobile,
        receiver: cutitem.receiver
      };
      if (address.addressid) {
        this.$store.dispatch("setDefaultAddress", address);
      }

      if (!cutitem.cutminprice) {
        this.cutText = "来晚啦,助力活动已结束<br>去看看其他商品吧!";
        this.modelBgClassBG = "cutgoing";
        this.showBtn = 2;
        this.cutGoingFail = true;
        return;
      }
      // if (!cutitem.isjoin) {// }
      if (
        cutitem.usercutstatus == 0 ||
        cutitem.usercutstatus == 3 ||
        cutitem.usercutstatus == 5 ||
        !cutitem.cutid
      ) {
        this.cartModel(1);
        // return
      } else if (cutitem.usercutstatus == 2) {
        if (!cutitem.orderno) {
          this.toast("没有订单编号");
          return;
        }
        // 去支付
        this.cutText = "当前商品您有待付款订单,<br>请先完成支付!";
        this.modelBgClassBG = "gotopay";
        this.showBtn = 6;
        this.cutGoingFail = true;
      } else {
        // CutProductDetailInfo

        let _ = this;
        if (_.insq) {
          let item = this.realInfo;
          let surplus = parseFloat(
            (
              _.CutProductDetailInfo.cutcurrentprice -
              _.CutProductDetailInfo.cutcountmoney
            ).toFixed(2)
          );
          item.salemoney = _.CutProductDetailInfo.cutcurrentprice;
          item.saleprice = surplus;
          item.specialprice = surplus;
          item.color = _.CutProductDetailInfo.color;
          item.colorimgurl = _.CutProductDetailInfo.colorimgurl;
          item.productitemid = _.CutProductDetailInfo.productitemid;
          item.size = _.CutProductDetailInfo.size;
          item.cutparamsType = true;
          item.cutminprice = _.CutProductDetailInfo.cutminprice;
          item.cuttingid = _.CutProductDetailInfo.cutid;
          item.count = 1;
          item.producttype = _.CutProductDetailInfo.producttype;
          item.productname = _.realInfo.name;
          item.cutcountmoney = _.CutProductDetailInfo.cutcountmoney;
          item.colorimg = _.CutProductDetailInfo.colorimgurl;
          item.usercutstatus = _.CutProductDetailInfo.usercutstatus;
          item.checked = true;
          item.isok = true;

          let tempTotalPrice = surplus;
          let pay = {
            ...item,
            id: _.$route.params.id,
            allPay: tempTotalPrice,
            item: [item]
          };
          _.$store.dispatch("setOrderCoupon", {
            canUseCoupon: [],
            unCanUseCoupon: []
          });
          _.$store.state.order.selectedCoupon = {};
          console.log("buyNowwwwww", pay);
          _.$store.dispatch("setOrderOut", { ...pay });
          _.$store.dispatch("setFromeType", 1);

          _.$router.push("/order/checkout");
        } else {
          _.buyparams(1, _.CutProductDetailInfo.productitemid);
        }
      }
    },
    share(type) {
      // 助力分享邀请好友
      if (!this.user.token && !this.insq) {
        this.$router.push("/login");
      }
      let item = this.CutProductDetailInfo;
      if (!item) {
        this.cutText = "来晚啦,助力活动已结束<br>去看看其他商品吧!";
        this.modelBgClassBG = "cutgoing";
        this.showBtn = 2;
        this.cutGoingFail = true;
        return;
      }
      // if (item.orderno&&!item.iscut) {
      //   // 去支付
      //   this.cutText = "当前商品您有待付款订单,<br>请先完成支付!";
      //   this.modelBgClassBG = "gotopay";
      //   this.showBtn = 6;
      //   this.cutGoingFail = true;
      //   return;
      // }

      if (!item.iscut && item.usercutstatus != 0 && item.usercutstatus != 4) {
        switch (Number(item.usercutstatus)) {
          case 1:
            this.cutText = "当前商品正在助力中,<br>快去邀请更多好友来助力吧!";
            this.modelBgClassBG = "cutgoing";
            this.showBtn = 2;

            break;
          case 2:
            this.cutText = "当前商品您有待付款订单,<br>请先完成支付!";
            this.modelBgClassBG = "gotopay";
            this.showBtn = 6;
            break;
          case 3:
            // alert(3)
            this.cutText =
              "好人缘爆棚,<br>您已经达到该商品助力的巅峰值,<br>快去看看其他商品吧!";
            this.modelBgClassBG = "cutSuccess";
            this.showBtn = 1;
            break;
          case 5:
            this.cutText = "来晚啦,助力活动已结束,<br>快去看看其他商品吧!";
            this.modelBgClassBG = "cutOver";
            this.showBtn = 1;
            break;
        }
        this.cutGoingFail = true;
      } else {
        // 发起助力
        sessionStorage.setItem("cuttype", 1);
        this.cartModel(3);
      }
    },
    getProductDetail() {
      // var productid = this.$route. params.id
      let _ = this;

      _.mtaReport("shangpinxiangqing_bg", { id: _.prodId });
      NewDetail(_.prodId, _.requestid, _.issearchclick)
        .then(res => {
          console.log("商品详情", res);
          if (res && res.info) {
            _.hasdata = 1;
            _.productInfo = res;

            _.$nextTick(() => {
              // 获取物流
              if (res.info && res.info.expresstemplateid) {
                _.getExpress(res.info.expresstemplateid);
              }

              // 获取收藏信息
              _.getFavor();

              setTimeout(() => {
                // 获取券
                // if (!_.insq)
                _.getCoupon();

                // 获取推荐
                _.getRelateds();
              }, 800);
            });
          } else {
            _.hasdata = 2;
            _.toast("商品不存在或已下架");
            // _.error = true
          }
        })
        .catch(e => {
          this.toast("加载失败");
          console.error("商品详情异常", e);
          // this.error = true
          // if (e && e.code == ENUM.StatusCode.unShelved)
          //   this.alert(e.msg, () => { this.$router.back(); });
          // else this.toast(e.msg);
        });
    },
    getExpress(expressTemplateId) {
      let _ = this;
      DetailExpress(expressTemplateId)
        .then(res => {
          console.log("商品详情物流信息", res);
          if (res) _.productInfo.info = { ..._.productInfo.info, ...res };
        })
        .catch(e => {
          console.error("物流信息加载失败", e);
        });
    },
    getFavor() {
      let _ = this;
      if (_.user.token) {
        DetailFavor(_.prodId)
          .then(res => {
            console.log("商品详情收藏信息", res);
            if (res) _.productInfo.info = { ..._.productInfo.info, ...res };
          })
          .catch(e => {
            console.error("收藏信息异常", e);
          });
      }
    },
    getCoupon() {
      let _ = this;
      _.evtcoupon = [];
      GetCouponInProduct(_.prodId)
        .then(res => {
          console.log("商品详情优惠券", res);
          if (res) {
            _.evtcoupon = res;
            // this.hasdata = 1
          }
        })
        .catch(e => {
          // this.hasdata = 2
          console.error("获取优惠券异常", e);
        });
    },
    goSearch(name, id) {
      var set = {};
      if (id) {
        set.brandid = id;
        set.brandName = name;
      } else {
        set.keyword = name;
      }
      this.$store.dispatch("confirOption", { data: set });
      this.$router.push("/mall/search/" + name);
    },
    goPlatFormActivity(id) {
      this.$router.push("/platformActivity/" + id);
    },
    backtoMall: function() {
      this.$router.replace("/");
    },
    gotoShopDetl: function(id) {
      this.$router.push("/shop/shopdetail/" + id);
    },
    showCoupon() {
      this.$store.state.product.showCoupons = true;
    },
    favProduct() {
      if (this.user.token) {
        var postData = {
          productid: this.realInfo.id,
          iscancel: this.realInfo.isfavor
        };

        this.mtaReport("spxq_shoucang_dj", {
          id: postData.productid,
          actiontype: (postData.iscancel ? "取消" : "") + "收藏"
        });

        // console.log('收藏参数', postData)
        FavorProduct(postData)
          .then(res => {
            this.favShow = true;
            setTimeout(() => {
              this.favShow = false;
              this.realInfo.isfavor = !this.realInfo.isfavor;
              this.toast((this.realInfo.isfavor ? "" : "取消") + "收藏成功");
            }, 500);
          })
          .catch(err => {
            console.log("err", err);
            // this.toast(err.msg)
          });
      } else {
        // if (this.$root.ISWX) {
        //   this.$router.push('/wxlogin')
        // } else {
        //   this.$router.push('/login')
        // }
        this.$router.push("/login");
      }
    },
    scrollF() {
      let name = window.document.querySelector(
        ".product_name>section:first-of-type"
      );
      let rect = name && name.getBoundingClientRect();
      let t = (rect && rect.top) || 50;
      var winY = window.scrollY;
      if (winY && winY >= t) {
        this.showTitle = true;
      } else {
        this.showTitle = false;
      }
    },
    goHost() {
      // this.$router.replace('/mall/ghost')
      this.$router.replace("/GhostProList?id=" + this.evts.evtspecial.id);
    },
    QiyuProd(info) {
      // 商品详情页面【分享】&【客服】点击操作调用埋点接口（
      let _ = this;
      let orderitem = _.realInfo;
      let extendid = "";
      if (_.ordertype == 0) {
        extendid = orderitem.productid;
      } else if (_.css.isShowHelp) {
        extendid = _.CutProductDetailInfo.cutid || _.$route.params.id;
      } else if (_.css.isShowGroup) {
        extendid = _.groupProductDetailInfo.pintuanId || _.$route.params.id;
      }
      uploadUserAction({ actiontype: 1, itemid: extendid })
        .then(res => {})
        .catch(e => {
          console.error(e);
        });
      this.report("联系客服", "商品详情页", {
        name: info.name,
        id: info.id,
        brandname: info.brandname
      });
      var prodInfo = {};
      prodInfo.title = info.brandname;
      prodInfo.desc = info.name;
      prodInfo.picture = info.mainpic.split("|")[0];
      prodInfo.note =
        info.specialprice > 0 ? info.specialprice : info.saleprice;
      prodInfo.url = window.location.href;
      QiyuProd.call(this, prodInfo);
      // QiyuProd(prodInfo);
    },
    getRelateds() {
      this.relativePods = [];
      ProdRelated({ ProductId: this.prodId })
        .then(res => {
          // console.log('相关推荐', res)
          if (res) {
            this.relativePods = res;
          }
        })
        .catch(e => {
          // this.hasdata=2
          // this.error = true
          // if (e && e.code == ENUM.StatusCode.unShelved)
          //   this.alert(e.msg, () => { this.$router.back(); });
          // else this.toast(e.msg);
          console.error("商品详情相关推荐异常", e);
        });
    },

    cartModel(type, groupBuyType, groupBuyTeamId) {
      // type 0 加入购物车，1 立即购买 2 我要开团 拼团 3 助力

      // groupBuyType 1 开团 2 参团
      let _ = this;

      _.report("商品详情-选择颜色尺码", type === 1 ? "立即购买" : "加入购物车");
      _.mtaReport("spxq_xuanze_dj", {
        clicktype: type === 1 ? "立即购买" : "加入购物车"
      });
      _.buyingType = type;
      _.groupBuyType = groupBuyType || 0;
      _.groupBuyTeamId = groupBuyTeamId || 0;

      if (_.insq || _.user.token) {
        if (!this.realInfo.isaftersale && !this.css.isShowHelp) {
          this.purchaseNotesHash = true;
        } else {
          this.css.showItems = true;
        }
      } else {
        // if (_.$root.ISWX) _.$router.push('/wxlogin')
        _.$router.push("/login");
      }

      /* this.showcart = true
        if (this.insq || this.user.token) { // 有用户信息
          this.$store.state.cart.showCartModel = true
          if (type == 0) this.$store.state.cart.cartType = ENUM.cartType.add.val
          if (type == 1) this.$store.state.cart.cartType = ENUM.cartType.buyNow.val
        } else {
          if (this.$root.ISWX) {
            this.$router.push('/wxlogin')
          } else {
            this.$router.push('/login')
          }
          // this.$router.push('/login')
        }*/
    },
    itemsClose(item) {
      let _ = this;
      _.css.showItems = false;
      sessionStorage.removeItem("cuttype", 1);
      if (item) {
        let type = _.buyingType;
        _.report(
          "商品详情-确认颜色尺码",
          type === 1 ? "立即购买" : "加入购物车"
        );
        _.mtaReport("spxq_xuanzewancheng_dj", {
          id: item.productid,
          itemid: item.productitemid,
          name: item.productname,
          sku: item.color + "," + item.size,
          clicktype: type === 1 ? "立即购买" : "加入购物车"
        });
        if (this.distribution) {
          item.prostatus = 0;
          item.distributionid = this.distribution.id;
        }

        if (type == 3 && this.css.isShowHelp) {
          // 助力
          // alert(type);
          localStorage.setItem("helphand", JSON.stringify(item));
          this.$router.push({
            path: "/user/address",
            query: { cutType: 1 }
          });
          return;
        }
        if (type === 0) {
          // if (_.dealLocal) _.addLocalCart(item)
          // else _.addCart(item)
          _.addCart(item);
        } else {
          _.buyNow(item);
        }
      }
    },
    addCart(item) {
      CartAdd(item)
        .then(res => {
          console.log("✔购物车添加成功", res);
          this.toast("已成功添加到您的购物车!");
        })
        .catch(e => {
          console.error("✖购物车添加失败", e);
          this.toast("购物车添加失败");
        });
    },
    addLocalCart(item) {
      console.log("--addLocalCart", item);
      let info = this.realInfo;
      let p = {
        businessid: info.businessid,
        businessname: info.businessname,
        businesstype: info.businesstype,
        isopen: true,
        createtime: ""
      };

      let cart = JSON.parse(ls.getItem(cartkey) || "[]");
      if (cart.length > 0) {
        let ok = false;
        cart = cart.map(c => {
          if (c.businessid === p.businessid) {
            c.items = c.items.map(i => {
              if (i.productitemid === item.productitemid) {
                ok = true;
                i.count += item.count;
              }
              return i;
            });

            if (!ok) c.items.unshift(item);

            ok = true;
          }
          return c;
        });
        if (!ok) cart.unshift({ ...p, items: [item] });
      } else cart = [{ ...p, items: [item] }];
      console.log("local add cart", cart);
      ls.setItem(cartkey, JSON.stringify(cart));
      this.toast("已成功添加到您的购物车!");
    },
    globalShop() {
      this.salesShow = !this.salesShow;
    },
    goSeleSize(type) {
      this.purchaseNotesHash = false;
      if (this.css.isShowHelp && type === 1) {
        this.cutPayBuy();
        return;
      }
      if (type === 1) {
        this.css.showItems = true;
      }
    },
    goSeleSizeNullFun() {},

    buyNow(item) {
      let _ = this;
      console.log("this.item", item);
      if (_.insq) {
        item.salemoney = item.saleprice;
        item.saleprice = item.price;
        item.specialprice = item.price;
        item.checked = true;
        item.isok = true;

        let tempTotalPrice = item.count * item.price;

        if (_.css.isShowGroup && !_.css.special && _.buyingType === 2) {
          item.groupBuyType = _.groupBuyType;
          item.groupBuyTeamId = _.groupBuyTeamId;
          item.groupActivityId = _.groupProductDetailInfo.pintuanId;
          item.saleprice = _.groupProductDetailInfo.teamprice;
          item.specialprice = _.groupProductDetailInfo.teamprice;
          item.salemoney = _.groupProductDetailInfo.teamprice;
          item.referenceprice = _.productInfo.info.saleprice;
          tempTotalPrice = item.count * _.groupProductDetailInfo.teamprice;
        }
        let pay = {
          ...item,
          id: item.productid,
          allPay: tempTotalPrice,
          item: [item]
        };

        _.$store.dispatch("setOrderCoupon", {
          canUseCoupon: [],
          unCanUseCoupon: []
        });
        _.$store.state.order.selectedCoupon = {};
        console.log("buyNow", pay);
        _.$store.dispatch("setOrderOut", { ...pay });
        _.$store.dispatch("setFromeType", 1);

        _.$router.push("/order/checkout");
      } else {
        _.$store.dispatch("updPayingOrder", "");
        _.buyparams(item.count, item.productitemid);
      }
    },
    buyparams(count, productitemid) {
      console.log(
        "--buyNow-------------------: ",
        this.realInfo,
        this.ordertype
      );
      let _ = this;
      let orderitem = _.realInfo;
      let extendid = null;
      if (_.ordertype == 0) {
        extendid = orderitem.productid;
      } else if (_.css.isShowHelp) {
        extendid = _.CutProductDetailInfo.cutid || _.$route.params.id;
      } else if (_.css.isShowGroup) {
        extendid = _.groupProductDetailInfo.pintuanId || _.$route.params.id;
      }
      orderitem.producttype =
        orderitem.producttype == 5 ? 0 : orderitem.producttype;
      let productitems = [
        {
          productitemid: productitemid, // "商品子项id",
          count: count || 1, // "int 数量",
          producttype: orderitem.producttype // "int 商品类型"
        }
      ];

      _.$router.push({
        path: "/order/NewCheckout",
        query: {
          productitems: encodeURIComponent(JSON.stringify(productitems)),
          ordertype: _.ordertype, //  "int 订单操作类型 0 - 普通，1 - 开团，2 - 参团，3 - 砍价",
          extendid: extendid //      "扩展id （根据ordertype和producttype决定具体类型的id：例：productid、activityid、teamid、cuttingid)"
        }
      });
    },
    showGroupMoreList(groupItem) {
      if (this.css.groupPopUp) {
        this.getGroupProductDetail();
      }

      this.css.groupPopUp = !this.css.groupPopUp;

      if (groupItem) {
        this.cartModel(2, 2, groupItem.teamid);
      }
    },

    getGroupProductDetail() {
      GetProductDetailGroup({ pid: this.prodId, tuid: this.user.uid })
        .then(res => {
          if (res) {
            console.log("拼团商品详细: ", res);

            this.groupProductDetailInfo.pintuanId = res.pintuanid;
            this.groupProductDetailInfo.teamprice = res.teamprice;
            this.groupProductDetailInfo.teamlimitcount = res.teamlimitcount;
            this.groupProductDetailInfo.teamtotalcount = res.teamtotalcount;
            this.groupProductDetailInfo.teamcount = res.teamcount;
            this.producttype = res.producttype;
            if (res.teamprice > 0) {
              this.css.isShowGroup = true;

              if (Array.isArray(res.list) && res.list.length > 0) {
                this.css.isShowGroupHaveList = true;
                this.groupProductDetailInfo.list = res.list;
                res.list.forEach(group => {
                  group.groupTimeRemain = this.groupProductDetailFormatTime(
                    group.endtime.replace(/-/g, "/")
                  );
                });

                this.groupList = res.list.slice(0, 2);

                let interval;
                if (typeof interval === "undefined") {
                  interval = window.setInterval(() => {
                    for (let i = 0; i < this.groupList.length; i++) {
                      this.groupList[
                        i
                      ].groupTimeRemain = this.groupProductDetailFormatTime(
                        this.groupList[i].endtime.replace(/-/g, "/")
                      );
                      let time = this.groupList[i].groupTimeRemain.split(":");
                      if (time[0] <= 0 && time[1] <= 0 && time[2] <= 0) {
                        this.groupList[i].isOpen = false;
                      } else {
                        this.groupList[i].isOpen = true;
                      }
                      this.$set(this.groupList, i, this.groupList[i]);
                    }
                  }, 1000);
                }
              }
            }
          }
        })
        .catch(e => {
          console.error(e);
        });
    },

    groupProductDetailFormatTime(time) {
      let tempCountdownTimeObject = DateDiff({
        destination: new Date(time),
        type: "H"
      });

      if (tempCountdownTimeObject.m < 0) {
        tempCountdownTimeObject.m = "00";
      } else if (tempCountdownTimeObject.m < 10) {
        tempCountdownTimeObject.m = "0" + tempCountdownTimeObject.m;
      }

      if (tempCountdownTimeObject.s < 0) {
        tempCountdownTimeObject.s = "00";
      } else if (tempCountdownTimeObject.s < 10) {
        tempCountdownTimeObject.s = "0" + tempCountdownTimeObject.s;
      }

      return (
        tempCountdownTimeObject.H +
        ":" +
        tempCountdownTimeObject.m +
        ":" +
        tempCountdownTimeObject.s
      );
    }
  },
  watch: {
    "$route.params.id": function(val, old) {
      // console.log('watch prodId', val, old, this.$route.name)
      if (this.$route.name === "product-detail" && val && val !== old) {
        this.getProductDetail();
      }
    }
  }
};
</script>
<style lang='scss' scoped>
/* @import "../../assets/css/my-mint.css"; */
.fadeTuihuo-enter-active,
.fadeTuihuo-leave-active {
  transition: opacity 0.3s;
}
.fadeTuihuo-enter,
.fadeTuihuo-leave-to {
  opacity: 0;
}
.cutModel-enter-active,
.cutModel-leave-active {
  transition: opacity 0.3s;
}
.cutModel-enter,
.cutModel-leave-to {
  opacity: 0;
}
.BusinessIsGlobalPurchase {
  overflow: hidden;
  font-size: 12px;
  padding: 15px 20px 15px 20px;
  background: #fff;
  /* margin-top: 10px; */
}
.BusinessIsGlobalPurchase > div {
  float: left;
  /* overflow: hidden; */
}
.BusinessIsGlobalPurchase > div.shopTLD {
  color: #fff;
  font-size: 20px;
  line-height: 40px;
  font-family: DINOT-CondBlack;
  text-align: center;
  background: #000000;
  border-radius: 50%;
  overflow: hidden;
  width: 40px;
  height: 40px;
}
.BusinessIsGlobalPurchase > div.businesstype {
  font-family: PingFangSC-Medium;
  font-size: 16px;
  color: #333333;
  margin-left: 10px;
  margin-top: -4px;
}
.BusinessIsGlobalPurchase > div.businesstype span {
  width: 56px;
  height: 24px;
  /* display: inline-block; */
  float: left;
  transform: rotate(6deg) scale(0.8);
  /* border-radius:2px; */
  margin-top: 3px;
}
.BusinessIsGlobalPurchase > div.businesstype .globalLogo {
  background: url("//files.eyee.com/mcdn/static/img/globalbuy.png") 0 0
    no-repeat;
  background-size: cover;
  /* color: #000; */
}
.BusinessIsGlobalPurchase > div.businesstype .storeLogo {
  background: url("//files.eyee.com/mcdn/static/img/official.png") 0 0 no-repeat;
  background-size: cover;
}
.BusinessIsGlobalPurchase > div.businesstype .buyLogo {
  background: url("//files.eyee.com/mcdn/static/img/buyshop.png") 0 0 no-repeat;
  background-size: cover;
}
.BusinessIsGlobalPurchase > div.businesstype .patentLogo {
  background: url("//files.eyee.com/mcdn/static/img/monopoly.png") 0 0 no-repeat;
  background-size: cover;
}
.BusinessIsGlobalPurchase > div.go-stroll {
  float: right;
  border: 1px solid #ffc700;
  border-radius: 100px;
  font-size: 12px;
  color: #ffc700;
  width: 62px;
  margin-top: 10px;
  line-height: 22px;
  text-align: center;
}
.isglobalpurchase {
  padding-left: 10px;
  position: relative;
  line-height: 24px;
  margin-top: 10px;
  display: block;
}
.isglobalpurchase:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  left: 0;
  top: 9px;

  background: #ffc700;
}
.fixnav {
  position: fixed !important;
  background: transparent;
}
.top_btns {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 48px;
  top: 0;
  left: 0;
}
.swiper-pagination {
  z-index: 1;
}
.prod_promotion {
  position: absolute;
  /*height:50px;*/
  bottom: 0;
  width: 100%;
  z-index: 1;
}
.activity {
  font-size: 0.75rem;
  color: #333;
}
.activity .moregoods {
  color: #ffc700;
}
i {
  font-style: normal;
}

.productDetail {
  margin-top: 0 !important;
  background: #fff;
}

.nav-top {
  transition: backgroundColor 0.2s ease;
}
.productDetail .nav-top {
  background-color: #fff !important;
}

.nav-top img {
  width: 40px !important;
  height: auto;
}

.cartBox {
  height: 48px;
  margin-right: 10px;
}

.info-price {
  display: inline-block;
  font-size: 16px;
  background: #eee;
  padding: 0px 30px;
  padding-right: 10px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  margin-top: 10px;
}
.info-saleprice {
  font-size: 22px;
}

.sea,
.state {
  display: inline-block;
  transform: translateY(-5px);
}

.state {
  border: 1px solid #333;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  margin-left: 3px;
  font-size: 1rem;
}

/* .productDetail .taxPrice {
  font-size: 22px;
}

.specialprice {
  font-size: 1rem;
} */

.product_name {
  margin: 0 0 0 20px;
  font-size: 15px;
  word-break: break-all;
}
.globalShop {
  /* display: flex; */
  background: #fff;
  overflow: hidden;
  padding: 5px 0 5px 20px;
  border-top: 1px solid #eee;
  /* margin-bottom: 10px;
  margin-top: 10px; */
}
.globalShop span {
  /* float: left; */
  /* width: 25%; */
  text-align: center;
  line-height: 30px;
  font-size: 10px;
  position: relative;
  padding-left: 18px;
  padding-right: 5px;
  flex: 1;
}
.globalShop span.enter {
  text-align: right;
  color: #ccc;
  right: 10px;
  font-size: 14px;
  float: right;
}
.globalShop span:before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 10px;
  height: 5px;
  color: #ffc700;
  line-height: 15px;
  border-bottom: 1px solid;
  border-left: 1px solid;
  transform-origin: center;
  transform: rotate(-50deg) scale(0.7);

  /* background: url("/static/img/tui.png")center center no-repeat; */
  /* background-size: 50%; */
  /* border: 1px solid #ffc700; */
  /* border-radius: 70%; */
}
.globalShop span::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 0px;
  width: 12px;
  height: 12px;
  border: 1px solid #ffc700;
  border-radius: 50%;
}
.globalShop span.enter::before,
.globalShop span.enter::after {
  content: "";
  border: 0;
}
.globalShop span:last-child:before,
.globalShop span:last-child:after {
  background: none;
  border: 0;
}
.product_name section:nth-of-type(1) {
  font-weight: 600;
  margin: 10px auto;
  line-height: 20px;
  font-size: 15px;
}

.send span {
  float: left;
  width: 14px;
  height: 14px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 5px;
}

.send {
  margin-right: 10px;
  float: left;
  display: flex;
  align-items: center;
}

.time_color {
  color: #af3c03;
}

.product_name section:nth-of-type(2) {
  font-size: 0.75rem;
  color: #666;
  padding-bottom: 20px;
}

.Ev {
  padding: 5px 0 5px 20px;
  /* margin: 10px 0; */
}

.productDetail .hasEv {
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  margin: 10px auto;
}

.productDetail .hasEv > span {
  background-repeat: no-repeat;
  display: inline-block;
  width: 34px;
  height: 16px;
  background-size: 100%;
  margin-right: 5px;
}

.icon_gift {
  background-image: url("//files.eyee.com/mcdn/static/img/icon_gift.png");
}

.icon_free {
  background-image: url("//files.eyee.com/mcdn/static/img/icon_free.png");
}

.icon_limit {
  background-image: url("//files.eyee.com/mcdn/static/img/icon_limit.png");
}

.icon_sale {
  background-image: url("//files.eyee.com/mcdn/static/img/icon_sale.png");
}

.icon_special {
  background-image: url("//files.eyee.com/mcdn/static/img/icon_special.png");
}
.icon_activity {
  background-image: url("//files.eyee.com/mcdn/static/img/icon_activity.png");
  align-self: flex-start;
}
.product_logo {
  text-align: center;
  /* margin-top: 10px; */
  padding-top: 15px;
  /* margin-bottom: 10px; */
}

.product_logo .logo_img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 1px solid #eee;
  overflow: hidden;
  margin: 6px auto;
}

.logo_img img {
  width: 100%;
  min-height: 100%;
}

.product_logo p:nth-of-type(1) {
  padding-bottom: 10px;
  font-weight: bold;
}

.product_logo p:nth-of-type(2) {
  padding: 5px 16% 20px 16%;
  font-size: 0.75rem;
}

.busName {
  position: relative;
  font-size: 0.875rem;
  padding: 15px 20px;
  margin: 10px 0;
}

.busName span {
  position: absolute;
  right: 10px;
  color: #ccc;
}
.busName > label {
  display: inline-block;
  padding: 0 3px;
  font-size: 11px;
  color: #fff;
  background: #d99485;
  border-radius: 2px;
  margin-right: 5px;
}
.busName > label.buyers {
  background: #e6cb5b;
}
.product_texture section:nth-of-type(1) {
  padding: 20px 20px;
  font-size: 0.875rem;
  text-align: center;
}

.product_texture section:nth-of-type(1) p {
  line-height: 26px;
  color: #000;
}

.product_texture section:nth-of-type(1) span {
  color: #666;
  margin-left: 5px;
}

.labels {
  padding: 15px 20px 5px 20px;
  border: 1px solid #f2f2f2;
  border-left: none;
  border-right: none;
}

.labels li {
  background-color: #333;
  color: #fff;
  font-size: 12px;
  border-radius: 2px;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  padding: 0 5px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.sizeList {
  padding: 0px 10px 18px 10px;
}

.sizeList table {
  width: 100%;
  border-collapse: collapse;
}

.sizeList table td {
  border: 1px solid #f2f2f2;
  text-align: center;
  color: #666;
  font-size: 0.75rem;
  width: 10%;
}

.sizeList table tr {
  height: 24px;
}

.sizeHead {
  background: #f2f2f2;
}

.recomd {
  /* margin: 10px 0; */
  padding: 20px 0px;
}

.recomd p {
  font-size: 0.94rem;
  margin-bottom: 20px;
}

.recomd p:after {
  margin-left: 10px;
}
.recomd .recomd_title {
  margin-left: 10px;
}
.icon_btn {
  float: left;
  width: 36%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.icon_btn.insq .favor {
  width: 30%;
  text-align: center;
}
.icon_btn:not(.insq) span,
.icon_btn.insq .icon_fev,
.icon_btn.insq .icon_isfev {
  display: inline-block;
  width: 20px;
  height: 30px;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.icon_btn.insq .icon_fev,
.icon_btn.insq .icon_isfev {
  width: 24px;
  height: 37px;
}

.icon_btn:not(.insq) span:after {
  content: "";
  display: inline-block;
  height: 100%;
  border-right: 1px solid #f2f2f2;
  position: absolute;
  right: -10px;
}
.icon_btn span:last-child:after {
  content: "";
  border-right: none;
}
.icon_btn span.out_fev:after {
  border: none;
}
.icon_btn.insq .server {
  flex-direction: column;
  width: 40%;
  height: 100%;
  background-color: #ffc700;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  padding-top: 2px;
}
.icon_btn.noFavBtn.insq .server {
  width: 60%;
}
.icon_btn.insq .server img {
  width: 40%;
}

.icon_server {
  background-image: url("//files.eyee.com/mcdn/static/img/service.png");
}
.icon_btn.insq {
  width: 40%;
}
.icon_btn.noFavBtn {
  width: 24%;
}
.icon_btn.noFavBtn.insq {
  width: 30%;
}
.footer_bar .btn_fix {
  width: 32%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: none;
  float: left;
  font-size: 0.875rem;
  background: #333;
  color: #fff;
}
.footer_bar .btn_fix.halfBtn {
  width: 64%;
}
.footer_bar .btn_fix.noFavBtn {
  width: 76%;
}
.footer_bar .btn_fix.insq {
  width: 60%;
}
.footer_bar .btn_fix.noFavBtn.insq {
  width: 70%;
}
.footer_bar .btn_m {
  color: #333;
  background: #fff;
}
.footer_bar .btn_fix.halfBtn .noStartSoldout {
  width: 50%;
  color: #fff;
  background: #999;
}
.footer_bar .btn_fix.halfBtn .btn_m,
.footer_bar .btn_fix.halfBtn .btn_buy,
.footer_bar .btn_fix.halfBtn .btn_group_buy {
  width: 50%;
}
.footer_bar .btn_fix.halfBtn .btn_buy {
  background: #333 !important;
}
.footer_bar .btn_fix.halfBtn .btn_group_buy {
  color: #333333;
  background: #ffc700 !important;
}
.footer_bar .btn_fix.halfBtn.noFavBtn .btn_buy.noCartBtn {
  width: 100%;
}
.footer_bar .btn_fix.halfBtn .noCartBtn {
  width: 100%;
  background: #999;
}
.footer_bar .btn_fix.halfBtn .noStartSoldout.noCartBtn {
  width: 100%;
}
.info-exchange {
  color: #999;
  padding: 0 30px;
  justify-content: space-between;
}

.info-exchange span {
  font-size: 0.75rem;
  margin-top: 5px;
}

.productDetail .spec_price {
  text-decoration: line-through;
  /* font-size: .9rem; */
  color: #666;
  /* display: inline-block; */
  /* transform: translateY(-3px); */
}

.titleP {
  padding: 10px;
  background: #fff;
}
.titleP.fixedTop {
  position: sticky;
  width: 100%;
  z-index: 3;
  top: 48px;
  padding: 0 10px;
}
.titleP p {
  width: 50%;
  float: left;
  text-align: center;
}

.titleP p span {
  display: inline-block;
  padding: 10px 20px;
  font-size: 0.875rem;
  color: #999;
}

.titleP p span.activeType {
  border-bottom: 2px solid #333;
  color: #333;
}

.swiper-slide img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

iframe {
  border: none;
  height: 1000px;
  background: #fff;
  width: 100%;
  overflow: hidden;
}
.product_sw {
  max-width: 600px;
  max-height: 600px;
  height: 100vw;
  margin: 0 auto;
  background-color: #fff;
  position: relative;
}

.product_des {
  text-align: center;
  padding: 10px;
}

.fixBottom {
  position: fixed;
  bottom: 50px;
  color: #fff;
  font-size: 1.125rem;
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: center;
}

.fixBottom span:nth-of-type(1) {
  width: 68%;
  text-align: center;
  float: left;
  background: #ffc700;
}

.exchange {
  float: left;
  width: 32%;
  background: #ffa600;
  font-size: 0.875rem;
}

.icon_bee {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(//files.eyee.com/mcdn/static/img/honey_white.png) no-repeat
    center;
  background-size: 100%;
  vertical-align: middle;
}

.hasbess {
  padding-bottom: 85px;
}

.mint-popup-bottom {
  width: 100%;
}

.mint-popup-top {
  top: 100px;
  width: 95%;
  border-radius: 4px;
}

.popup p:nth-of-type(1) {
  display: flex;
  justify-content: space-between;
  line-height: 20px;
  border-bottom: 1px solid #999;
  padding: 5px 10px 0 10px;
}

.close::before {
  font-size: 26px;
  color: #999;
  content: "\2717";
}

.popup p:nth-of-type(2) {
  line-height: 20px;
  margin: 10px 50px 10px 10px;
  text-align: left;
}

.product_des {
  text-align: center;
  padding: 10px;
}
.bee_box {
  position: fixed;
  bottom: 50px;
  color: #fff;
  font-size: 1.125rem;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.bee_box > p {
  float: left;
  height: 30px;
  color: #fff;
  font-size: 14px;
  text-align: center;
}
.bee_box > p.left_bee {
  width: 68%;
  font-weight: 600;
  background-color: #fbd85d;
}
.bee_box > p.left_bee > em {
  display: inline-block;
  width: 16px;
  height: 17px;
  background: url("/static/img/bee_white.png") no-repeat center;
  background-size: 16px 17px;
}
.bee_box > p.right_bee {
  width: 32%;
  background-color: #ffc700;
}
.distribution {
  float: right;
  margin-top: 10px;
  line-height: 42px;
  padding-right: 10px;
  font-size: 14px;
  span {
    font-family: BASE_PRICE;
    font-size: 18px;
  }
  em {
    float: left;
    background: url(/static/img/d_share.png);
    width: 13px;
    height: 13px;
    background-size: 13px 13px;
    margin-top: 17px;
    margin-right: 4px;
  }
}
.cutAddress .title,
.confirmAdress .title {
  text-align: center;
  margin-bottom: -20px;
  margin-top: 20px;
}
.confirmAdress .title {
  margin: 20px;
  font-size: 17px;
  color: #333;
}
.addressName,
.dizhi {
  color: #666;
  font-size: 14px;
  padding-left: 20px;
  line-height: 24px;
  text-align: left;
}

.bg {
  background: rgba(0, 0, 0, 0.5);
  z-index: 101;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.confirmAdress {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  /* height: 216px; */
  padding-bottom: 20px;
  background: #fff;
  border-radius: 5px;
  z-index: 105;
}

.cutinfo .cut_btn,
.confirmAdress .cut_btn {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.cutinfo .cut_btn span,
.confirmAdress .cut_btn span {
  width: 46%;
  height: 38px;
  line-height: 38px;
  border: 1px solid #ffc700;
  background: #ffc700;
  border-radius: 5px;
  color: #333;
}
.confirmAdress .cut_btn span {
  text-align: center;
}
.cutinfo .cut_btn span:nth-child(1),
.confirmAdress .cut_btn span:nth-child(1) {
  color: #999;
  background: none;
  border: 1px solid #ccc;
}
</style>
